<template>
  <div>
    <v-chart class="chart" :option="option" style="width:800px" />
  </div>
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
// import * as echarts from 'echarts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { defineComponent } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

export default defineComponent({
  name: "HelloWorld",
  data() {
    return {
      option: null,
    };
  },
  components: {
    VChart,
  },
  props: ["x_data","series"],
  provide: {
    [THEME_KEY]: "white",
  },
  watch: {
    series(newvalue) {
      if (newvalue) {
        console.log(newvalue);
        console.log(this.x_data)
        // var app = {};

        // var chartDom = document.getElementById("main");
        // var myChart = echarts.init(chartDom);
        // // var option;

        // var posList = [
        //   "left",
        //   "right",
        //   "top",
        //   "bottom",
        //   "inside",
        //   "insideTop",
        //   "insideLeft",
        //   "insideRight",
        //   "insideBottom",
        //   "insideTopLeft",
        //   "insideTopRight",
        //   "insideBottomLeft",
        //   "insideBottomRight",
        // ];

        // app.configParameters = {
        //   rotate: {
        //     min: -90,
        //     max: 90,
        //   },
        //   align: {
        //     options: {
        //       left: "left",
        //       center: "center",
        //       right: "right",
        //     },
        //   },
        //   verticalAlign: {
        //     options: {
        //       top: "top",
        //       middle: "middle",
        //       bottom: "bottom",
        //     },
        //   },
        //   position: {
        //     options: posList.reduce(function(map, pos) {
        //       map[pos] = pos;
        //       return map;
        //     }, {}),
        //   },
        //   distance: {
        //     min: 0,
        //     max: 100,
        //   },
        // };

        // app.config = {
        //   rotate: 90,
        //   align: "left",
        //   verticalAlign: "middle",
        //   position: "insideBottom",
        //   distance: 15,
        //   onChange: function() {
        //     var labelOption = {
        //       normal: {
        //         rotate: app.config.rotate,
        //         align: app.config.align,
        //         verticalAlign: app.config.verticalAlign,
        //         position: app.config.position,
        //         distance: app.config.distance,
        //       },
        //     };
        //     myChart.setOption({
        //       series: [
        //         {
        //           label: labelOption,
        //         },
        //         {
        //           label: labelOption,
        //         },
        //         {
        //           label: labelOption,
        //         },
        //         {
        //           label: labelOption,
        //         },
        //       ],
        //     });
        //   },
        // };

        // var labelOption = {
        //   show: true,
        //   position: app.config.position,
        //   distance: app.config.distance,
        //   align: app.config.align,
        //   verticalAlign: app.config.verticalAlign,
        //   rotate: app.config.rotate,
        //   formatter: "{c}  {name|{a}}",
        //   fontSize: 16,
        //   rich: {
        //     name: {},
        //   },
        // };
        this.option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            data: ["Forest", "Steppe", "Desert", "Wetland"],
          },
          toolbox: {
            show: true,
            orient: "vertical",
            left: "right",
            // top: "center",
            feature: {
              // dataView: { show: true, readOnly: false },
              saveAsImage: { show: true },
            },
          },
          xAxis: [
            {
              type: "category",
              axisTick: { show: false },
            //   data: ['2012', '2013', '2014', '2015', '2016']
            data:this.x_data
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series:this.series
        //   series: [
        //     {
        //       name: "Forest",
        //       type: "bar",
        //       barGap: 0,
        //         // label: labelOption,
        //       emphasis: {
        //         focus: "series",
        //       },
        //       data: [320, 332, 301, 334, 390],
        //     },
        //     {
        //       name: "Steppe",
        //       type: "bar",
        //         barGap: 0,
        //         // label: labelOption,
        //       emphasis: {
        //         focus: "series",
        //       },
        //       data: [220, 182, 191, 234, 290],
        //     },
        //     {
        //       name: "Desert",
        //       type: "bar",
        //         // label: labelOption,
        //       emphasis: {
        //         focus: "series",
        //       },
        //       data: [150, 232, 201, 154, 190],
        //     },
        //     {
        //       name: "Wetland",
        //       type: "bar",
        //         // label: labelOption,
        //       emphasis: {
        //         focus: "series",
        //       },
        //       data: [98, 77, 101, 99, 40],
        //     },
        //   ],
        };
      }
    },
  },
  created() {
    console.log(this.props);
  },
});
</script>
<style>
.chart {
  height: 400px;
}
</style>
